<template>
	<view class="w-100">
		<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
		<view class="flex-1 goods-rotation-box">
			<view class="goods-rotation">
				<swiper class="w-750 h-750" :autoplay="true" @change="swiperChange">
					<swiper-item class="w-750 h-750" v-for="(item,index) in productDetail.image_list" :key="index">
						<image :src="item.url" mode="" class="w-750 h-750" />
					</swiper-item>
				</swiper>
			</view>
			<view class="flex-1 current-dots-box">
				<view class="flex-1 d-f justify-end mr-4 font-s-3">
					<view class="current-dots row text-white">{{ swiperCurrent + 1 }}</view>
					<view class="current-dots row text-white">{{ imageListNum }}</view>
				</view>
			</view>
			<view class="flex-1 nav-box">
				<view class="flex-1 mx-2 row-ac-sb">
					<view class="iconfont icon-back2-01 row" @click="toBack" v-if="currentStatus"></view>
					<navigator class="iconfont icon-shouye1 row" url="/pages/tabar/index" open-type="switchTab" v-else>
					</navigator>
					<!-- <view class="row-ac">
						<view class="iconfont icon-collect-01 row mr-2"></view>
						<view class="iconfont icon-fenxiang row"></view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="mt-2 flex-1 px-3 bg-white py-3">
			<view class="font-s-7 font-w" v-if="productDetail.price > 0"><text
					class="font-s-2">￥</text>{{ productDetail.price }}</view>
			<view class="font-s-7 font-w" v-else>预售中</view>
			<view class="mt-1 font-s-4 d-f">
				<view class="flex-1 in2line font-w-500">{{ productDetail.product_name }}</view>
				<view class="font-s-3 text-light-grey">库存 {{ productDetail.inventory }}</view>
			</view>
			<view class="flex-1 mt-2 row-ac">
				<view class="flex-1 row">
					<view class="row-ac text-light-grey font-s-2">
						<button class="shara-button" v-if="collectionStatus == true" @click="collectionDelete"><text
								class="iconfont icon-heart-2-01 mr-1"></text>已收藏</button>
						<button class="shara-button" v-else @click="productCollection(productDetail.id)"><text
								class="iconfont icon-heart1 mr-1"></text>收藏</button>
					</view>
				</view>
				<view class="flex-1 row">
					<view class="flex-1 row">
						<view class="row-ac text-light-grey font-s-2">
							<button class="shara-button" open-type="share"><text
									class="iconfont icon-fenxiang1 mr-1"></text>分享</button>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mt-2 flex-1 px-3 bg-white py-3">
			<!-- <view class="row-ac-sb flex-1 mx-2">
				<view class="row-ac flex-1">
					<view class="font-s-2 text-light-grey">选择</view>
					<view class="font-s-3 ml-2">已选:<text>{{ userChooseSkuText }}</text></view>
				</view>
				<view class="iconfont icon-next-01 text-light-grey" style="font-size: 22rpx;"></view>
			</view> -->
			<view class="row-ac-sb flex-1 mx-2 mt-3">
				<view class="row-ac flex-1">
					<view class="font-s-2 text-light-grey">送至</view>
					<view class="font-s-3 ml-2" v-if="addressInfo"><text>{{ address.city }}{{ address.district }}</text>
					</view>
				</view>
				<view class="iconfont icon-next-01 text-light-grey" style="font-size: 22rpx;"></view>
			</view>
			<view class="row-ac-sb flex-1 mx-2 mt-3">
				<view class="row-ac flex-1">
					<view class="font-s-2 text-light-grey">运费</view>
					<view class="font-s-3 ml-2">包邮<text></text></view>
				</view>
			</view>
		</view>
		<view class="mt-2 flex-1 px-3 bg-white py-3">
			<view class="flex-1 font-s-3 font-w">商品介绍</view>
			<view class="mt-1 flex-1">
				<view class="image-text"><rich-text :nodes="productDetail.details"></rich-text></view>
			</view>
		</view>
		<view class="flex-1" style="height: 60px;"></view>
		<view class="goods-carts">
			<view class="goods-nav">
				<view class="cart-box flex">
					<view class="cart-sub-left flex mr-1">
						<view class="cart-item-box">
							<navigator class="cart-item row-a-j-fc" url="/pages/tabar/cart" open-type="switchTab">
								<view class="iconfont icon-gouwuche"></view>
								<view class="font-s-2 mt-1">购物车</view>
							</navigator>
							<view class="cart-item-num row" v-if="cartTotal > 0">{{ cartTotal }}</view>
						</view>
					</view>
					<view class="flex-1 row-ac font-s-2">
						<view class="cart-left flex-1 row" @click="addCartItem">加入购物车</view>
						<view class="cart-right flex-1 row" @click="addOrder">前往报单</view>
					</view>
				</view>
			</view>
		</view>
		<leson-popup :popupStatu="lesonpopup" @statusChanged="handleStatusChanged">
			<view class="flex-1 py-3 spec-box">
				<view class="flex-1 mx-3 spec-box">
					<view class="flex-1 d-f pb-5 border-bottom">
						<view class="spec-pro-img">
							<image :src="specImg" mode=""></image>
						</view>
						<view class="spec-pro flex-1 ml-2">
							<view class="font-s-4 font-w text-danger"><text
									class="font-s-2">￥</text>{{ productDetail.price }}</view>
							<view class="font-s-3 mt-1"><text class="mr-2">已选:</text>{{ userChooseSkuText }}</view>
							<view class="row-ac mt-2 font-s-3">
								<view class="mr-2">库存</view>
								<view class="">{{ specStock }}</view>
							</view>
							<view class="row-ac mt-2">
								<view class="mr-2 font-s-3 mt-1">数量</view>
								<view class="row-ac ml-5 change-box">
									<view class="iconfont icon-jianhao row"
										:class="quantityNum > 1 ? 'iconfont-orange' : 'iconfont-grey'"
										@tap="decreaseQuantity"></view>
									<view class="mx-2 font-s-4 text-light-grey">{{ quantityNum }}</view>
									<view class="iconfont icon-jiahao row"
										:class="inventoryStata ? 'iconfont-orange' : 'iconfont-grey'"
										@tap="increaseQuantity"></view>
								</view>
							</view>

						</view>
					</view>
					<view class="flex-1 mt-3">
						<view class="flex-1 mb-3" v-for="item in productDetail.skus" :key="item.id">
							<view class="font-s-3 font-w-500">{{ item.name }}</view>
							<view class="flex-1 row-ac-fw mt-3">
								<view class="spec-item row-ac mb-3" v-for="(spec, index) in item.atributeList"
									:key="spec.id" @click="toggleSpec(spec,index)">
									<view class="spec-img" v-if="spec.attr_img">
										<image :src="spec.attr_img" mode=""></image>
									</view>
									<view class="spec-name mr-3 font-s-3" :class="{ 'active': specIndex == index }">
										{{ spec.name }}
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-1 mt-5 row">
						<view class="cart-button font-s-3 row" v-if="cartItemStatu" @click="popupAddCartItem">加入购物车
						</view>
						<view class="cart-button font-s-3 row" v-if="!cartItemStatu" @click="popupBuy">立即报单</view>
					</view>
				</view>
			</view>
		</leson-popup>
	</view>
</template>

<script>
	import lesonPopup from "@/components/leson-popup"
	import {
		productDetailUrl,
		cartDetailsUrl,
		addCartItemsUrl,
		addCartItemListsUrl,
		addressListUrl,
		ordersCreateUrl,
		userInfoUrl,
		productcollectionCreateUrl,
		productcollectionListUrl,
		productcollectionDeleteUrl
	} from '@/api/index.js';
	import {
		formatRichText
	} from '@/utils/util';
	export default {
		components: {
			lesonPopup
		},
		data() {
			return {
				currentStatus: false,
				statusBarHeight: '',
				productDetail: '',
				imageListNum: '',
				swiperCurrent: '',
				goodsId: '',
				merchantId: '',
				cartId: '',
				loginStatus: false,
				cartTotal: 0,
				addressInfo: false,
				address: '',
				lesonpopup: false,
				specImg: '',
				selectedValues: {},
				inventoryStata: true,
				quantityNum: 1,
				userChooseSkuText: '',
				cartItemStatu: true,
				markId: '',
				specIndex: 0,
				specStock: 0,
				formData:{
					product:''
				},
				queryInfo:{
					product_id:''
				},
				collectionId:'',
				collectionStatus:false
			}
		},
		onLoad(options) {
			this.init(options)
			if (options.markCode) {
				this.userMarkId = options.markCode
				uni.setStorage({
					key: 'userMarkId',
					data: options.markCode
				});
			} else {
				this.userMarkId = ''
			}
			const pages = getCurrentPages()
			// 判断栈的长度
			if (pages.length <= 1) {
				this.currentStatus = false
			} else {
				this.currentStatus = true
			}
		},
		created() {
			this.$getScreenInfo().then(res => {
				this.statusBarHeight = res.statusBarHeight
			})
			this.getCartDetails()
		},
		onShow() {
			this.checkLoginStatus();
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.productDetail.product_name,
				path: '/pages/product/details?productId=' + this.goodsId + '&markCode=' + this.markId,
			}
		},
		methods: {
			init(options) {
				this.getProducts(options.productId)
				this.getCartList()
				this.getAddressList()
				this.getProductcollectionList(options.productId)
				this.token = uni.getStorageSync('token')
				if (this.token != '') {
					this.loginStatus = true
					this.getUserInfo()
					this.getCartDetails()
				}
			},
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.user_id = res.data.id
					this.markId = res.data.mark_id
				})
			},
			checkLoginStatus() {
				const token = uni.getStorageSync('token');
				if (token) {
					this.loginStatus = true
				} else {
					this.loginStatus = false;
				}
			},
			getProducts(goodsId) {
				this.$R.get(productDetailUrl + goodsId + '/').then(res => {
					this.productDetail = res.data
					this.goodsId = res.data.id
					this.merchantId = res.data.merchant
					this.imageListNum = res.data.image_list.length
					this.specImg = res.data.image_list[0].url
					this.productDetail.details = formatRichText(res.data.details);
					if (this.productDetail.variant == 1) {
						this.specStock = this.productDetail.skus[0].atributeList[0].stock
						this.userChooseSkuText = this.productDetail.skus[0].atributeList[0].name
						this.specId = this.productDetail.skus[0].atributeList[0].id
					}
				})
			},
			getProductcollectionList(goodsId) {
				this.queryInfo.product_id = goodsId
				this.$R.get(productcollectionListUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.collectionList = res.data.list
						if(this.collectionList.length > 0){
							this.collectionStatus = true
							this.collectionId = this.collectionList[0].id
						}else{
							this.collectionStatus = false
						}
					}
				});
			},
			getCartDetails() {
				if (this.loginStatus) {
					this.$R.get(cartDetailsUrl).then(res => {
						this.cartId = res.data.id
					})
				}
			},
			getCartList() {
				if (this.loginStatus) {
					this.$R.get(addCartItemListsUrl).then(res => {
						this.cartTotal = res.data.total
					})
				} else {
					return
				}
			},
			getAddressList() {
				if (this.loginStatus) {
					this.$R.get(addressListUrl).then(res => {
						if (res.data.list.length == 0) {
							this.addressInfo = false
						} else {
							this.addressInfo = true
							this.address = res.data.list[0]
						}
					})
				} else {
					return
				}
			},
			swiperChange(e) {
				this.swiperCurrent = e.detail.current
			},
			addCartItem() {
				if (this.loginStatus) {
					if (this.productDetail.inventory == 0) {
						uni.showToast({
							title: '库存已空',
							icon: 'none'
						});
					} else {
						if (this.productDetail.variant == 0) {
							this.$R.post(addCartItemsUrl + this.cartId + '/' + this.goodsId + '/', {
								merchant: this.merchantId
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '加入购物车成功',
										icon: 'none'
									});
									this.getCartList()
								} else if (res.code == 400) {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							})
						} else if (this.productDetail.variant == 1) {
							this.lesonpopup = true
							this.cartItemStatu = true
						}
					}
				} else {
					uni.navigateTo({
						url: '/pages/public/login',
					})
				}
			},
			popupAddCartItem() {
				if (this.loginStatus) {
					if (this.quantityNum > this.specStock) {
						uni.showToast({
							title: '库存不足',
							icon: 'none'
						});
					} else {
						this.$R.post(addCartItemsUrl + this.cartId + '/' + this.goodsId + '/', {
							merchant: this.merchantId,
							quantity: this.quantityNum,
							spec: this.userChooseSkuText,
							specId: this.specId
						}).then(res => {
							this.lesonpopup = false
							uni.showToast({
								title: '加入购物车成功',
								icon: 'none'
							});
							this.getCartList()
						})
					}
				} else {
					uni.navigateTo({
						url: '/pages/public/login',
					})
				}

			},
			decreaseQuantity() {
				if (this.quantityNum > 1) {
					this.quantityNum--;
					this.inventoryStata = true
				}
			},
			increaseQuantity() {
				if (this.quantityNum >= this.productDetail.inventory || this.quantityNum >= this.specStock) {
					uni.showToast({
						title: '库存数量不足',
						icon: 'none'
					});
					this.inventoryStata = false
				} else {
					this.inventoryStata = true
					this.quantityNum++;
				}
			},
			handleStatusChanged(newVal) {
				this.lesonpopup = newVal
			},
			onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			toggleSpec(spec, index) {
				this.specIndex = index
				console.log(spec);
				this.userChooseSkuText = spec.name
				this.specStock = spec.stock
				this.specId = spec.id
			},
			addOrder() {
				if (this.loginStatus) {
					if(this.productDetail.inventory == 0){
						uni.showToast({
							title: '库存不足',
							icon: 'none'
						});
					}else{
						if (this.productDetail.variant == 0) {
							this.orderInfo = {
								product_id: this.goodsId,
								quantity: 1
							}
							this.$R.post(ordersCreateUrl, this.orderInfo).then(res => {
								if (res.code == 200) {
									this.orderId = res.data.id
									uni.navigateTo({
										url: '/pages/order/report?orderId=' + this.orderId,
									});
								}
							})
						} else if (this.productDetail.variant == 1) {
							this.lesonpopup = true
							this.cartItemStatu = false
						}
					}
					
				} else {
					uni.navigateTo({
						url: '/pages/public/login',
					})
				}
			},
			popupBuy() {
				if (this.loginStatus) {
					if (this.specStock == 0) {
						uni.showToast({
							title: '库存数量不足',
							icon: 'none'
						});
					} else {
						this.orderInfo = {
							product_id: this.goodsId,
							quantity: this.quantityNum,
							spec: this.userChooseSkuText,
							specId: this.specId
						}
						this.$R.post(ordersCreateUrl, this.orderInfo).then(res => {
							if (res.code == 200) {
								this.orderId = res.data.id
								uni.navigateTo({
									url: '/pages/order/report?orderId=' + this.orderId,
								});
							}
						})
					}

				} else {
					uni.navigateTo({
						url: '/pages/public/login',
					})
				}
			},
			productCollection(productId) {
				this.formData.product = productId
				console.log(this.formData.product);
				this.$R.post(productcollectionCreateUrl, this.formData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '收藏成功',
							icon: 'none'
						});
						this.collectionStatus = true
					}
				})
			},
			collectionDelete(){
				this.$R.delete(productcollectionDeleteUrl + this.collectionId + '/').then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '取消收藏',
							icon: 'none'
						});
						this.collectionStatus = false
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.goods-rotation-box {
		position: relative;

		.goods-rotation {
			width: 750rpx;
			height: 750rpx;
		}

		.current-dots-box {
			position: absolute;
			bottom: 42rpx;
			left: 0;
			right: 0;

			.current-dots {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .2);
			}
		}

		.nav-box {
			position: absolute;
			top: 25rpx;
			left: 0;
			right: 0;

			.iconfont {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .6);
				color: #fff;
			}

			.icon-shouye1 {
				font-size: 18px;
			}
		}
	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.goods-nav {
		display: flex;
		flex: 1;
		flex-direction: row;

		.cart-box {
			flex: 1;
			height: 60px;
			background-color: #fff;
			z-index: 900;
		}
	}

	.flex {
		display: flex;
		flex-direction: row;
	}

	.cart-sub-left {
		padding: 0 5px;
	}

	.cart-item-box {
		width: 100rpx;
		height: 60px;
		position: relative;

		.cart-item {
			width: 100rpx;
			height: 60px;

			.iconfont {
				font-size: 42rpx;
			}
		}

		.cart-item-num {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			position: absolute;
			top: 10rpx;
			right: 18rpx;
			background-color: red;
			color: #fff;
			font-size: 18rpx;
		}
	}

	.cart-left {
		height: 80rpx;
		background: #333;
		color: #fff;
	}

	.cart-right {
		height: 80rpx;
		background: #000;
		color: #fff;
	}

	.spec-box {
		height: 468px
	}

	.spec-pro-img {
		width: 130rpx;
		height: 130rpx;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 12rpx;
		}
	}

	.spec-item {
		height: 50rpx;
		line-height: 50rpx;

		.spec-img {
			width: 50rpx;
			height: 50rpx;
			border-radius: 8rpx;
		}

		.spec-name {
			height: 50rpx;
			line-height: 50rpx;
			padding: 0 22rpx;
			background-color: #f5f5f5;
			border-radius: 8rpx;
		}
	}

	.active {
		background-color: #000 !important;
		color: #fff;
	}

	.cart-button {
		width: 80%;
		height: 88rpx;
		color: #fff;
		background-color: #000;
	}

	.change-box {
		.iconfont {
			font-size: 26rpx;
			width: 35rpx;
			height: 35rpx;
			border: 1rpx solid;
		}


		.iconfont-orange {
			color: #000;
		}

		.iconfont-grey {
			color: #B8B8B8;
		}

	}

	.shara-button {
		color: #828282;
		background-color: initial; //背景色为全透明
		font-size: 24rpx;

		&:after {
			border: none;
		}
	}
</style>